<template>
  <section>
    <h2>Todo List</h2>

    <!-- 普通待办 -->
    <ul>
      <li v-for="t in todos" :key="t.id">
        <input type="checkbox" v-model="t.done" />
        <span :class="{ done: t.done }">{{ t.text }}</span>
      </li>
    </ul>

    <!-- 展示奇数和的“特殊”待办 -->
    <ul>
      <li>
        <input type="checkbox" disabled />
        <span>1 到 {{ n }} 的奇数和 = {{ oddSum }}</span>
      </li>
    </ul>

    <!-- 动态修改 n -->
    <div>
      <label>n =
        <input type="number" min="1" max="999" v-model.number="n" />
      </label>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { sumOdd } from '@/utils/math'

/* 普通待办数据 */
const todos = ref([
  { id: 1, text: '学习 Vue3 组合式 API', done: false },
  { id: 2, text: '写个奇数和函数', done: true },
])

/* 奇数和相关 */
const n = ref(10)                       // 用户可改
const oddSum = computed(() => sumOdd(n.value))
</script>

<style scoped>
.done {
  text-decoration: line-through;
  color: #999;
}
input[type="number"] {
  width: 60px;
  margin-left: 4px;
}
</style>